<template>
  <div
    class="hm-image-bg"
    :style="{
      borderRadius: showBorder ? radius : 'unset',
      backgroundImage: 'url(' + picUrl + ')',
      borderWidth: showBorder ? '2px' : 0
    }"
  ></div>
</template>

<script>
let picUrl = require("@/assets/img/picloadbg.png");
/**
 * 以背景形式展示图片
 *
 */
export default {
  name: "hm-image-bg",
  props: {
    site: String, //图片地址
    isBackgroundShow: {
      // 是否显示默认背景图
      type: Boolean,
      default: true
    },
    shape: {
      //图片形状  默认square为方形，circle则为圆形
      type: String,
      default: "square"
    },
    showBorder: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    shape: {
      handler(value) {
        if (value === "circle") {
          this.radius = "50%";
        } else {
          this.radius = "6px";
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      picUrl,
      radius: "6px"
    };
  },
  methods: {
    picLoad() {
      var images = new Image();
      images.onload = () => {
        this.picUrl = this.site;
        images = null;
      };
      images.onerror = () => {
        images = null;
      };
      images.src = this.site;
    }
  },
  created() {
    this.picLoad();
  }
};
</script>

<style scoped>
.hm-image-bg {
  width: 100%;
  height: 100%;
  background: #222 url("~@/assets/img/picloadbg.png") no-repeat center center;
  background-size: cover;
  border-radius: 4px;
}
</style>
